<template>
  <div class="hm-title">
    <transition-group
      v-if="another && wordTrig"
      name="quee"
      tag="ul"
      class="hm-title-list"
      :style="scrollStyle"
    >
      <li v-for="item in list" v-show="item.id === flag" :key="item.id">
        {{ item.cont }}
      </li>
    </transition-group>
    <ul class="hm-title-cont" v-else>
      <li>{{ word }}</li>
      <li>{{ word }}</li>
    </ul>
  </div>
</template>

<script>
import Bus from "@/directives/bus";
/**
 * 文本滚动组件
 */
export default {
  name: "hm-title",
  props: {
    //触发条件 为真是滚动，默认为假
    trig: {
      type: Boolean,
      default: false
    },
    //展示的文本内容
    text: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      flag: 0, // 控制滚动文本显示下标
      timeout: 0, // 滚动超时控制
      another: false, // 控制显示默认文本或滚动文本
      wordTrig: false, // 判断文本是否为超长文本
      scrollStyle: "", // 文本滚动动画样式
      duration: 8, // 控制文本滚动时长
      hideTimeStr: 0 // 页面隐藏前一次定时器启动时间
    };
  },
  watch: {
    trig() {
      this.aniFn();
    }
  },
  computed: {
    word() {
      return this.text;
    },
    list() {
      return [
        {
          id: 0,
          cont: this.text
        },
        {
          id: 1,
          cont: this.text
        }
      ];
    }
  },
  mounted() {
    this.checkScroll();
  },
  methods: {
    times() {
      clearTimeout(this.timeout);
      this.flag++;
      if (this.flag === 2) {
        this.flag = 0;
      }
      this.hideTimeStr = new Date().getTime();
      this.timeout = setTimeout(() => this.times(), (this.duration + 1) * 1000);
    },
    checkScroll() {
      let tempDom = this.$el.childNodes[0];
      let parentWidth = tempDom.offsetWidth;
      let childWidth = tempDom.childNodes[1].offsetWidth;
      if (parentWidth < childWidth) {
        this.wordTrig = true;
        this.duration = Math.round(childWidth / 4) / 10;
        this.scrollStyle =
          "transition: transform " + this.duration + "s linear;";
      } else {
        this.wordTrig = false;
        this.duration = 0;
        this.scrollStyle = "";
      }
      this.aniFn();
    },
    aniFn() {
      clearTimeout(this.timeout);
      if (this.trig && this.wordTrig) {
        Bus.$on("pageStateChange", this.stateChange);
        this.another = true;
        this.timeout = setTimeout(() => this.times(), 1000);
      } else {
        Bus.$off("pageStateChange", this.stateChange);
        this.another = false;
      }
    },
    stateChange(state) {
      if (state.state === "hide") {
        clearTimeout(this.timeout);
      } else {
        let tempStr = new Date().getTime();
        tempStr =
          this.duration + 1 - Math.floor((tempStr - this.hideTimeStr) / 1000);
        if (tempStr > 0) {
          this.timeout = setTimeout(() => {
            this.times();
          }, tempStr * 1000);
        } else {
          this.times();
        }
      }
    }
  },
  destroyed() {
    clearTimeout(this.timeout);
    Bus.$off("pageStateChange", this.stateChange);
  }
};
</script>

<style scoped>
.hm-title .hm-title-list,
.hm-title .hm-title-cont {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.hm-title .hm-title-list {
  perspective: 1;
  -webkit-perspective: 1;
}

.hm-title li {
  margin: 0;
  height: 100%;
  white-space: nowrap;
  position: absolute;
  left: 0;
  top: 0;
  min-width: 100%;
}

.hm-title .hm-title-list li.quee-enter-active {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  -webkit-transition: inherit;
  transition: inherit;
}

.hm-title .hm-title-list li.quee-leave-active {
  -webkit-transform: translateX(-120%);
  transform: translateX(-120%);
  -webkit-transition: inherit;
  transition: inherit;
}

.hm-title .hm-title-list li.quee-enter {
  -webkit-transform: translateX(120%);
  transform: translateX(120%);
}

.hm-title .hm-title-list li.quee-leave {
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

.hm-title .hm-title-cont li:nth-child(1) {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hm-title .hm-title-cont li:nth-child(2) {
  top: 100%;
}
</style>
